<template>
    <div id="centerLeft1">
        <div class="bg-color-black">
            <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-bar" class="text-icon"></icon>
        </span>
                <div class="d-flex">
                    <span class="fs-xl text mx-2">农产品分类</span>
                    <dv-decoration-3 class="dv-dec-3"/>
                </div>
            </div>
            <div class="d-flex jc-center">
                <CenterLeft1Chart/>
            </div>
            <!-- 4个主要的数据 -->
            <div class="bottom-data">
                <div
                        class="item-box mt-2"
                        v-for="(item, index) in numberData"
                        :key="index"
                >
                    <div class="d-flex">
                        <span class="coin">￥</span>
                        <dv-digital-flop class="dv-digital-flop" :config="item.number"/>
                    </div>
                    <p class="text" style="text-align: center;">
                        {{ item.text }}
                        <span class="colorYellow">(件)</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import * as DataApi from "@/http/DataApi.js";
    import CenterLeft1Chart from '@/components/echart/centerLeft/centerLeft1Chart'

    export default {
        data() {
            return {
                numberData: null
            }
        },
        components: {
            CenterLeft1Chart
        },
        mounted() {

        },
        methods: {},
        created() {
              // DataApi.getAll(11).then((res) => {
              //   let content = res.data[0]["content"];
              //   let content2 = content.replaceAll("\r", "").replaceAll("\n", "");
              //   console.log(content2);
              //   this.numberData = JSON.parse(`${content2}`)
              // });
            },
        }
</script>

<style lang="scss" scoped>
    $box-width: 300px;
    $box-height: 410px;

    #centerLeft1 {
        padding: 16px;
        height: $box-height;
        width: $box-width;
        border-radius: 10px;
        .bg-color-black {
            height: $box-height - 30px;
            border-radius: 10px;
        }
        .text {
            color: #c3cbde;
        }
        .dv-dec-3 {
            position: relative;
            width: 100px;
            height: 20px;
            top: -3px;
        }

        .bottom-data {
            .item-box {
                & > div {
                    padding-right: 5px;
                }
                font-size: 14px;
                float: right;
                position: relative;
                width: 50%;
                color: #d3d6dd;
                .dv-digital-flop {
                    width: 120px;
                    height: 30px;
                }
                // 金币
                .coin {
                    position: relative;
                    top: 6px;
                    font-size: 20px;
                    color: #ffc107;
                }
                .colorYellow {
                    color: yellowgreen;
                }
                p {
                    text-align: center;
                }
            }
        }
    }
</style>
